<template>
    <el-dialog title="选择会员" :visible.sync="dialogTableVisible" top="10vh" width="700px" :before-close="handleClose"  append-to-body>
        <div class="flex jc-e vs-m-b-10">
            <el-input style="width:280px" class="vs-m-r-20" clearable v-model="userPaging.keys" placeholder="姓名/手机号/地址"></el-input>
            <el-button @click="handleCurrentChange(1)" type="primary">搜索</el-button>
        </div>
        <el-table :data="userList" v-loading="userloading" @row-click="chioseUser" border max-height="500px">
            <el-table-column property="realname" label="姓名" align="center"></el-table-column>
            <el-table-column label="性别" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.gender | typeGender }}</span>
                </template>
            </el-table-column>
            <el-table-column property="phone" label="手机号" align="center"></el-table-column>
            <el-table-column property="address" label="门店" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.store">{{ scope.row.store.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-success icon" :class="scope.row.index==index ? 'active' : ''"></i>
                </template>
            </el-table-column>
        </el-table>
        <div class="vs-paging-box">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page.sync="userPaging.page" :page-size="userPaging.limit" layout="total, sizes, prev, pager, next, jumper" :total="userPaging.total">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer flex jc-c">
            <el-button @click="handleClose()">取 消</el-button>
            <el-button type="primary" @click="confirmUser()">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data(){
        return{
            userloading:false,
            userPaging: {
                limit: 10,
                total: 0,
                page: 1,
                keys: '',
                is_stock: '1'
            },
            userList: [], //会员列表
            index:-1,
            referrer:"",
        }
    },
    props:{
        value:{
            type:Boolean,
            default:false,
        }
    },
    created(){
        // this.getUserList();
    },
    computed:{
        dialogTableVisible:{
            set(val){
                this.$emit("input",val)
            },
            get(){
                return this.value
            }
        }
    },
    methods:{
        // 关闭选择会员弹窗
        handleClose(dom) {
            // this.index = -1;
            dom && dom();
            this.dialogTableVisible = false;
        },
        //选择会员
        chioseUser(ele) {
            this.index = ele.index;
        },
        // 获取会员列表
        async getUserList() {
            this.userloading = true;
            let { code, data } = await this.$Http.getUser(this.userPaging);
            this.userloading = false;
            if (code) {
                data.data.forEach((v,i)=>v.index=i)
                this.userList = data.data;
                this.userPaging.total = data.total
            }
        },
        handleCurrentChange(val) {
            this.userPaging.page = val;
            this.getUserList();
        },
        handleSizeChange(val){
            this.userPaging.limit = val;
            this.getUserList();
        },
        // 选择会员确定按钮
        confirmUser() {
            if (this.index>=0) {
                this.dialogTableVisible = false;
                this.$emit("confirm",this.userList[this.index])
            } else {
                this.$message.error("请选择会员");
            }
        },
    }
}
</script>

<style scoped lang="scss">
.icon {
    font-size: 24px;
    cursor: pointer;
}
.active {
    color: #409eff !important;
}
</style>